<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人首页</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-size: 40px;
			text-align: center;
		}
		li{
			list-style: none;
		}
		#header{
			width: 	100%;
			height: 170px;
			background-color: lightblue;
		}
		#nav{
			width: 90%;
			height: 50px;
			margin: 0 auto;
			background-color: #358;
		}
		#main{
			width: 90%;
			margin: 0 auto;
			background-color: #66cc33;
		}
		#main .section{
			height: 400px;
			font-size: 20px;
		}
		#stairs{
			position: absolute;
			top: 230px;
			right: 15px;
			width: 50px;
			line-height: 32px;
			font-size: 14px;
			background-color: #9933cc;
			border: 1px solid #e5e9ef;
			border-radius: 5px; 
			/*如果涉及到圆角 基本和overflow配套使用*/
			overflow: hidden;
			transition: all 1s;
		}
		#stairs ul li{
			cursor: pointer;
		}
		#stairs ul li:hover{
			color: fff;
			background-color: #0099ff;
		}
		#footer{
			width: 90%;
			margin: 0 auto;
			background-color: #99cc66;
		}
	</style>
</head>
<body>
	<div id="header">头部</div>
	<div id="nav">导航</div>
	<div id="main">
		<div class="section">直播</div>
		<div class="section">动画</div>
		<div class="section">番剧</div>
		<div class="section">舞蹈</div>
		<div class="section">游戏</div>
		<div class="section">科技</div>
		<div class="section">生活</div>
		<div class="section">国创</div>
		<div class="section">时尚</div>
		<div class="section">广告</div>
	</div>
	<div id="footer">页脚</div>
	<div id="stairs">
		<ul>
			<li>直播</li>
			<li>动画</li>
			<li>番剧</li>
			<li>舞蹈</li>
			<li>游戏</li>
			<li>科技</li>
			<li>生活</li>
			<li>国创</li>
			<li>时尚</li>
			<li>广告</li>
		</ul>
	</div>
</body>
<script src="./jquery-3.2.1.js"></script>
<script>
	$(function (){

		var _top = $("#main").offset().top;  //获取主体内容与浏览器顶部的距离
		$(window).scroll(function(){
			var scrollTop = $(this).scrollTop();// 获取滚动条的高度
			// console.log(scrollTop)
			if( scrollTop > _top){
				$("#stairs").css({
					position: "fixed",
					top: "0px"
				}); //改变楼梯的css样式属性
			}else{
				$("#stairs").css({
					position: "absolute",
					top: "220px"
				}); //改变楼梯的css样式属性
			}
		});

		$("#stairs > ul > li").click(function(){
			var index = $(this).index();  //点击获取li的下标
			// console.log(index);
			$("html,body").animate({ scrollTop: index * 400 + _top +"px" },500)//动画改变滚动条的高度
		})
	})
</script>
</html>
